<template>
  <div class="tb_container">
    <div class="search_bar">
      <el-input
      v-model="search_value"
      class="search_bar_input"
      placeholder="搜索 nongtalk"
      :prefix-icon="Search"
      @blur="searchFunction"
    />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
// import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
// 引入pinia中的useStore库
import { useStore } from '@/stores/userData'
// 引入storeToRefs，使普通数据变为响应式数据
import { storeToRefs } from "pinia";
// 接收useStore
const store = useStore()
// 解构并使数据具有响应式
const { searchData } = storeToRefs(store);
// const router = useRouter()
const search_value = ref('')
const searchFunction = () => {
  store.searchPost(search_value.value)
}
</script>
<style lang="scss" scoped>
.tb_container{
  width: 99%;
  height: 50px;
  backdrop-filter: saturate(50%) blur(8px);
  background: rgba(255,255,255,.7);
  position: absolute;
  z-index: 10;
}
.search_bar{
  height: 100%;
  position: relative;
}
.search_bar_input{
  width: 70%;
  position: absolute;
  top: calc(50% - 32%);
  left: calc(50% - 35%);
}
:deep(.el-input__wrapper){
  border-radius: 20px;
}
</style>